﻿@model IEnumerable<Freedom.Repository.Models.Product>

@{
    ViewBag.Title = "Index";

    const string gridTitle = "Products Grid List 1";
    const string gridId = "productslist";
    var dataRequestUrl = Url.RouteUrl("JqxGrid.DefaultApi", new { httproute = "", controller = "Products"});
}

@section scripts
{
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqx")
    <script type="text/javascript">
        var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
            if (value < 20){
                return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
            } else {
                return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
            }
        }
        var gridSetting = new Array(
            {name: 'Name', datafield:'Name', text:'Product Name', width:200},
            {name: 'Category', datafield:'Category', text: 'Category', width:270},
            { name: 'Price', datafield: 'Price', text: 'Price', width: 200, cellsformat: 'c2', cellsrenderer: cellsrenderer }
        );
    </script>
    @Html.Partial("GridViewJs", new {GridId = gridId, DataRequestUrl = dataRequestUrl, GridSetting = "gridSetting"})
}
@section style
{
    @Styles.Render("~/Content/css/jqx")
}
<h2>Index</h2>
<div>
    <div class="main-content">
        <div>
            <h1>@gridTitle</h1>
            <div id='jqxWidget' style="vertical-align:middle; font-size: 13px; font-family: Verdana; ">
                <div id="@gridId"></div>
            </div>
        </div>
        <div>
            @foreach(var item in Model)
            {
                <span>@item.Name</span><br/>
            }
        </div>
    </div>
</div>
<br />